<template>
  <div>
    <div class="content login-form" v-if="label == 'normal'">
      <el-form :model="normalForm" :rules="normalFormRules" ref="normalForm">
      <div class="t1">{{$t('login.t1')}}</div>
      <div class="t2 hide">{{$t('login.t2')}}</div>
      <div class="regist-form">
        <el-form-item prop="userName">
          <div class="sub-title">{{$t('login.input1')}}</div>
          <input name="name" style="display: none">
          <el-input name="name" placeholder="enter your account"  v-model="normalForm.userName" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <div class="sub-title">{{$t('login.input2')}}</div>
          <div class="relative">
            <el-input placeholder="enter your password" :type="pwdType" v-model="normalForm.password"></el-input>
            <span class="show-pwd" @click="showPwd"><svg-icon :icon-class="eyeClass" /></span>
          </div>
        </el-form-item>
        
        <el-radio v-model="isRemember" :label="true">{{$t('regist.input4')}}</el-radio>
        <div class="btns">
          <a href="javascript:;" class="login-btn aip-white-btn" @click="toAuthLogin">{{$t('login.btn1')}}</a>
          <el-button type="primary" v-waves class="login-btn aip-green-btn" :loading="loading" @click.native.prevent="goLogin">
            {{$t('regist.t5')}}
          </el-button>
        </div>
      </div>
    </el-form>
    </div>
    <div class="content login-form" style="padding-bottom: 100px" v-if="label == 'auth'">
      <el-form :model="authForm" :rules="authFormRules" ref="authForm">
      <div class="t1">{{$t('login.t1')}}</div>
      <div class="t2">{{$t('login.t5')}}</div>
      <div class="regist-form">
        <el-form-item prop="userName">
          <div class="sub-title">{{$t('login.input1')}}</div>
          <el-input placeholder="enter your account" autocomplete="off" v-model="authForm.userName" clearable></el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
          <div class="sub-title">{{$t('login.input3')}}</div>
          <div class="relative">
            <input style="display:none" name="code" type="text">
            <el-input placeholder="enter your code" name="code" autocomplete="off"  v-model="authForm.verifyCode" clearable></el-input>
            <a href="javascript:;" class="login-btn auth-code" :class='{"aip-white-btn": isTiming, "aip-green-btn": !isTiming}' @click="getAuthCode">{{TimingText || $t('login.btn2')}}</a>
          </div>
        </el-form-item>
        
        <el-radio v-model="isRemember" :label="true">{{$t('regist.input4')}}</el-radio>
        <div class="btns auth-btns" style="text-align: right">
          <el-button type="primary" v-waves class="login-btn aip-green-btn" :loading="loading" style="margin-top: 30px" @click.native.prevent="goLogin">
            {{$t('regist.t5')}}
          </el-button>
        </div>
      </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getAuthCodeApi } from '@/api/login'
import Cookies from 'js-cookie'
import waves from '@/directive/waves' // 水波纹指令
var timer = null;

export default {
  name: 'dashboard',
  data() {
    return {
      label: 'normal',
      loading: false,
      normalForm: {
        userName: Cookies.get('aipUN') || '',
        password: ''
      },
      normalFormRules: {
        userName: [{ required: true, message: 'amazon acount is required', trigger: 'change' }],
        password: [{ required: true, message: 'password is required', trigger: 'change' }]
      },
      authForm: {
        userName: Cookies.get('aipUN') || '',
        verifyCode: ''
      },
      authFormRules: {
        userName: [{ required: true, message: 'amazon acount is required', trigger: 'change' }],
        verifyCode: [{ required: true, message: 'verifyCode is required', trigger: 'change' }]
      },
      isRemember: false,
      isTiming: false,
      TimingText: '',
      pwdType: 'password',
      eyeClass: 'eye'
    }
  },
  directives: {
      waves
  },
  watch: {
    isRemember: function (val) {
      if (val) {
        Cookies.set('aipUN', this.normalForm.userName, { expires: 30 });
      }
    }
  },
   methods: {
     showPwd() {
       if (this.pwdType === 'password') {
         this.pwdType = ''
         this.eyeClass = 'open_eye'
       } else {
         this.pwdType = 'password'
         this.eyeClass = 'eye'
       }
     },
     toAuthLogin() {
      this.label = 'auth'
     },
     goLogin() {
      if (this.label == 'normal') {
        this.$refs.normalForm.validate(valid => {
         if (valid) {
          this.$store.dispatch('NormalLogin', this.normalForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.$route.query.cbPath ? this.$route.query.cbPath : '/' })
          }).catch(() => {
            this.loading = false
          })
         } else {
           console.log('error submit!!')
           return false
         }
       })
      } else {
        this.$refs.authForm.validate(valid => {
         if (valid) {
          this.$store.dispatch('AuthLogin', this.authForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.$route.query.cbPath ? this.$route.query.cbPath : '/' })
          }).catch(() => {
            this.loading = false
          })
         } else {
           console.log('error submit!!')
           return false
         }
       })
      }
     },
     getAuthCode() {
      if (this.isTiming) return false;
      if (this.authForm.userName) {
        this.isTiming = true;
        this.TimingText = '60s';
        var temp = 60;
        timer = setInterval(() => {
          temp--;
          if (temp >= 0) {
            this.TimingText = temp + 's';
          } else {
            clearInterval(timer);
            this.isTiming = false;
            this.TimingText = '';
          }
        }, 1000);
        getAuthCodeApi({userName: this.authForm.userName}).then(response => {
              
        }).catch(e => {
          clearInterval(timer);
          this.isTiming = false;
          this.TimingText = '';
        })
      }
      
     }
  },
  created() {
  }
}
</script>

<style  scoped>
  .content {
    width: 100%;
    height: 430px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
    padding: 32px 29px;
    background: #ffffff;
  }
  .content .t1 {
    font-size: 30px;
    color: #757575;
    padding-bottom: 10px;
  }
  .content .t2 {
    font-size: 14px;
    color: #A1A1A1;
  }
  .regist-form {
  }
  .regist-form .sub-title {
    font-size: 12px;
    color: #A1A1A1;
    margin-top: 5px;
  }
  .el-input {
    margin: 4px 0 0;
  }
  .btns {
    margin-top: 45px;
    text-align: center;
  }
  .auth-btns {
    margin-top: 30px;
  }
  .aip-white-btn {
    width: 197px;
  }
  .aip-green-btn {
    width: 114px;
  }
  .login-btn {
    height: 42px;
    line-height: 42px;
    border-radius: 4px;
    font-size: 14px;
  }
  .auth-code {
    width: 85px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 5px;
    top: 9px;
  }
  .my-email {
    font-size: 14px;
    color: #3DBDB6;
    padding: 5px 0;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 16px;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
    user-select:none;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .el-radio {
    margin-top: 16px;
  }
</style>
<style type="text/css">
  .regist-box .el-radio__label{
    color: #A1A1A1;
    font-weight: normal;
  }
  .regist-box .el-radio__input.is-checked+.el-radio__label {
    color: #3DBDB6;
  }
  .regist-box .el-radio__input.is-checked .el-radio__inner {
    border-color: #3DBDB6;
    background: #3DBDB6;
  }
  .login-form .el-form-item__content {
    line-height: inherit;
    margin-top: 15px;
  }
</style>
